import IssueStatusBadge from "@/app/components/IssueStatusBadge";
import prisma from "@/prisma/client";
import {Avatar, Card, Flex, Heading, Table} from "@radix-ui/themes";

import Link from "next/link";
import React from 'react';

const LatestIssues =async () => {
    const issues =await prisma.issue.findMany({
        orderBy:{createAt:"desc"},
        take:5,
        include:{
            assignedToUser:true
        }
    });
    return (
        <Card>
            <Heading size={"4"} mb={"4"} align={"center"}>
                Latest Issues
            </Heading>
            <Table.Root variant={"ghost"}>
                <Table.Body>
                    {issues.map((issue)=>(
                        <Table.Row key={issue.id}>
                            <Table.Cell>
                                <Flex justify={"between"}>
                                    <Flex direction={"column"} align={"start"} gap={"2"}>
                                        <Link href={`/issues/${issue.id}`}>{issue.title}</Link>
                                        <IssueStatusBadge status={issue.status}/>
                                    </Flex>
                                    {issue.assignedToUser&&(
                                        <Avatar
                                            fallback={"?"}
                                            src={issue.assignedToUser.image!}
                                            size={"2"}
                                            radius={"full"}
                                        />
                                    )}
                                </Flex>
                            </Table.Cell>
                        </Table.Row>
                    ))}
                </Table.Body>
            </Table.Root>
        </Card>
    );
};

export default LatestIssues;